<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>互动计数器</title>
  <style>
    .container { max-width: 600px; margin: 20px auto; }
    .counter { font-size: 4em; text-align: center; }
    button { padding: 10px 20px; margin: 5px; }
    #chart { display: flex; height: 150px; align-items: flex-end; gap: 2px;
    }
    .bar { background: #4CAF50; width: 20px; transition: height 0.3s; }
  </style>
</head>
<body>
<div class="container">
  <div class="counter" id="count">0</div>

  <div style="text-align: center;">
    <button onclick="changeCount(-1)">-1</button>
    <input type="number" id="customNum" placeholder="输入数字"
           style="width: 100px;">
    <button onclick="applyCustom()">应用</button>
    <button onclick="changeCount(1)">+1</button>
  </div>
  <h3>操作记录</h3>
  <ul id="history"></ul>
  <h3>访问统计</h3>
  <p>加载时间：<span id="loadTime"></span></p>
  <p>访问次数：<span id="visitCount"></span></p>
  <div id="chart"></div>
</div>
<script>
  // 基础数据
  let count = localStorage.getItem('counter') || 0;
  let history = [];
  const visitData = JSON.parse(localStorage.getItem('visitData')) || {
    count: 0,
    hours: new Array(24).fill(0)
  };
  // 初始化页面
  document.addEventListener('DOMContentLoaded', () => {
    // DOM操作
    updateDisplay();
    document.getElementById('loadTime').textContent = new
    Date().toLocaleString();

    // BOM应用
    visitData.count++;
    const currentHour = new Date().getHours();
    visitData.hours[currentHour]++;
    localStorage.setItem('visitData', JSON.stringify(visitData));

    // 统计图表
    renderChart();

    // 键盘事件
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowUp') changeCount(1);
      if (e.key === 'ArrowDown') changeCount(-1);
    });
  });
  // 核心功能函数
  function changeCount(delta) {
    count = Number(count) + delta;
    history.push(`${delta > 0 ? '+' : ''}${delta}`);
    if(history.length > 5) history.shift();
    saveAndUpdate();
  }
  function applyCustom() {
    const input = document.getElementById('customNum');
    const value = Number(input.value);
    if(!isNaN(value)) {
      count += value;
      history.push(`自定义: ${value}`);
      saveAndUpdate();
    } else {
      alert('请输入有效数字！');
    }
    input.value = '';
  }
  function saveAndUpdate() {
    localStorage.setItem('counter', count);
    updateDisplay();
  }
  function updateDisplay() {
    document.getElementById('count').textContent = count;
    document.getElementById('visitCount').textContent = visitData.count;
    document.getElementById('history').innerHTML = history
            .map(item => `<li>${item}</li>`)
            .reverse()
            .join('');
  }
  // 动态图表
  function renderChart() {
    const chart = document.getElementById('chart');
    chart.innerHTML = visitData.hours
            .map((val, idx) =>
                    `<div class="bar" style="height: ${val * 10}px"
                 title="小时 ${idx}: ${val}次"></div>`
            ).join('');
  }
  // 窗口尺寸响应
  window.addEventListener('resize', () => {
    document.querySelector('.container').style.maxWidth =
            window.innerWidth < 600 ? '90%' : '600px';
  });
</script>
</body>
</html>